@tab-header: 30px;

.x-tabs {
	position: relative;
	overflow: hidden;

	&-nav {
		position: relative;
	    z-index: 1;
	    margin-bottom: 12px;
	    user-select: none;
	    border-bottom: 1px solid #D2D2D2;
	}

	&-bar, &-nav-container {
		position: relative;
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		outline: none;
		zoom: 1;
		transition: padding .45s;
	}
	&-tab-prev, &-tab-next {
		position: absolute;
		z-index: 2;
		width: 0;
		height: 100%;
		text-align: center;
		border: 0;
		opacity: 0;
		color: rgba(0, 0, 0, 0.45);
		transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		user-select: none;
		pointer-events: none;
		cursor: pointer;
	}
	&-tab {
		position:relative;
		z-index:10;
		display:inline-block;
		vertical-align:top;
		margin-left:-20px;
		padding:0 19px;
		font-size:14px;
		border:none;
		outline:none;
		background:none;
		cursor:pointer;

		&:first-child {
			margin-left:7px;
		}

		&:hover {
			&:before, &:after {
				background-image:url(../../images/tab-arrow-hover.png);
			}

			em {
				background-color:#d9e2f4;
			}
		}

		&:before, &:after {
			content:'';
			display:block;
			position:absolute;
			top:0;
			width:19px;
			height:@tab-header;
			background:url(../../images/tab-arrow.png) no-repeat;
		}
		&:before {
			left:0;
			background-position:left top;
		}
		&:after {
			right:0;
			background-position:right top;
		}

		em {
			display:block;
			height:@tab-header;
			padding:0 20px;
			border-top:1px solid #C6C6C6;
			font-style:normal;
			// line-height:unit(unit(@tab-header) + 2, px);
			line-height:@tab-header;
			// max-width:180px;
			white-space:nowrap;
			text-overflow:ellipsis;
			overflow:hidden;
			background-color:#c6d4ee;
		}
	}
	&-tab-active {
		&, &:hover {
			bottom:-1px;
			z-index:100;
			cursor:default;

			&:before, &:after {
				background-image:url(../../images/tab-arrow-active.png);
			}

			em {
				font-weight:bold;
				background-color:#FFFFFF;
			}
		}
	}
	&-content {
		width: 100%;
	}
	&-content-animated {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		transition: margin-left .3s cubic-bezier(.645, .045, .355, 1);
		will-change: margin-left;
	}

	&-tabpane {
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 100%;
		opacity: 1;
		-webkit-transition: opacity .45s;
		transition: opacity .45s;
	}
	&-tabpane-inactive {
		height: 0;
		padding: 0 !important;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
	}
}

.fixed-tabs {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;

	&-header {
		// height: @tab-header;
		// border-bottom:1px solid #D2D2D2;

		li {
			min-width:100px;
			text-align:center;
		}
	}
	&-body {
		position: absolute;
		top: @tab-header;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20px;
		border:1px solid #e4e4e4;
	    box-shadow: 0 0 7px rgba(0,0,0,.1);
	    background-color: #fff;

	    padding-bottom: 0;
	    overflow: auto;
	    &:after {
	    	content: '';
	    	display: block;
	    	height: 20px;
	    }
	}
}